import { ref, watch } from 'vue'
export function getDom(multipleSelection, dataLen) {
  const domHeight = ref('auto')
  // const resupHeight = ref('')
  let dom = null
  // 监听dom 高度变化
  // 添加监听事件
  const addListener = () => {
    dom = document.querySelector('.zcb-search')
    let MutationObserver = window.MutationObserver || window.webkitMutationObserver || window.MozMutationObserver
    let recordHeight = 0
    let mutationObserver = new MutationObserver(function(mutations) {
      let height = window.getComputedStyle(dom).getPropertyValue('height')
      if (height === recordHeight) {
        return
      }
      recordHeight = height
      let btn = multipleSelection.value?.length !== 0 ? '+ 40px' : '+ 0px'
      domHeight.value = 'calc(100vh - (' + recordHeight + ' + 64px + 12px ' + btn + ' ))'
      // 之后更新外部容器等操作
    })
    mutationObserver.observe(dom, {
      childList: true, // 子节点的变动（新增、删除或者更改）
      attributes: true, // 属性的变动
      characterData: true, // 节点内容或节点文本的变动
      subtree: true // 是否将观察器应用于该节点的所有后代节点
    })
  }
  const resetTableHeight = () => {
    dom = document.querySelector('.zcb-search')
    let height = window.getComputedStyle(dom).getPropertyValue('height')
    let btn = multipleSelection.value?.length !== 0 ? '+ 40px' : '+ 0px'
    domHeight.value = 'calc(100vh - (' + height + ' + 64px + 12px ' + btn + ' ))'
  }
  return {
    resetTableHeight,
    addListener,
    domHeight
  }
}
